<style>

    .survey-position-item{
        padding: 11px 15px;
        border: 1px dotted #ddd;
        border-bottom: none;
        cursor: move;
        font-size: 15px;
    }

    .survey-position-item:hover{
        background-color: #f0fcff;
    }

    .survey-position-item:last-child{
        border-bottom: 1px dotted #ddd;
    }

    .survey-position-item-icon{
        font-size: 15px;
        color: #666;
        padding-right: 10px;
    }
</style>

<div style="padding: 20px">
    <h3><?php echo $title; ?></h3>
    <div class="survey-position">
        <?php
            foreach($survey as $value){
                ?>
                    <div class="survey-position-item" data-id="<?php echo $value['scid']; ?>">
                        <span class="survey-position-item-icon"><i class="fa fa-sort"></i></span>
                        <span><?php echo $value['survey_child_name']; ?></span>
                    </div>
                <?php
            }
        ?>
    </div>
</div>

<script>
    $('.survey-position').sortable({
        connectWith: '.survey-position',
        items:'> .survey-position-item',
        opacity:0.8,
        revert:true,
        forceHelperSize:true,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize:true,
        tolerance:'pointer',
        update: function (event, ui) {
            var survey_position = $('.survey-position-item');
            var size = survey_position.size();
            for(var i = 0; i < size; i++){
                var sid = $(survey_position.get(i)).attr("data-id");
                $.ajax({
                    type:"POST",
                    url:Root_url+"management/updatePositionSurvey",
                    data:{'sid': sid, 'position': i},
                    success:(function(data){

                    })
                });
            }
        }

    });
</script>